/*
 * @Date: 2020-07-22 10:24:37
 * @LastEditors: xujianxing
 * @LastEditTime: 2020-08-06 13:18:21
 * @FilePath: \my-react-app\src\App.tsx
 */

import React from "react";
import { Switch, Route, Link } from "react-router-dom";

import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Detail } from "./pages/About/Detail";
import { FetchPage } from "./pages/Fetch";
import style from "./pages/index.module.scss";
import { history } from "./utils/history";

/**
 * 嵌套渲染子视图
 * 可选择平行嵌套
 * <Router render={(
 *  <Router />
 *  <Router />
 * )} />
 * 以及内部嵌套
 * <Router>
 *  <>
 *   <Router />
 *   <Router />
 * </>
 * </Router>
 */
function App() {
  return (
    <>
      <Link className={style.link} to="/home">
        goHome
      </Link>
      <Link className={style.link} to="/about">
        goAbout
      </Link>
      <Link className={style.link} to="/about/11">
        goAboutDetail
      </Link>
      <span className={style.link} onClick={(e) => history.push("/about/99")}>
        编程式push
      </span>
      <span className={style.link} onClick={(e) => history.push("/fetch")}>
        FetchPage
      </span>

      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/home" component={Home} />
        <Route
          path="/about"
          render={({ match }) => {
            return (
              <>
                <Route path={`${match.path}`} component={About} />
                <Route path={`${match.path}/:id`} component={Detail} />
              </>
            );
          }}
        />
        <Route path="/fetch" component={FetchPage} />
      </Switch>
    </>
  );
}

export default App;
